<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>淡白影视 - 直播</title>
    <meta name="Keywords" content="淡白影视,淡白电影,淡白电视剧,淡白综艺,开源影视网站,弹幕影视"/>
    <meta name="Description" content="淡白影视是一个在线免vip观看影视的网站,还能观看发送弹幕."/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="icon" href="https://cdn.p00q.cn/favicon.ico">
    <link rel="stylesheet" href="https://cdn.p00q.cn/ys/css/bootstrap.min.css">
    <script src="https://cdn.p00q.cn/ys/js/jquery.min.js"></script>
    <script src="https://cdn.p00q.cn/ys/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/p2p-dplayer@latest"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
    <link rel="stylesheet" rev="stylesheet" type="text/css" media="all" href="https://cdn.p00q.cn/ys/css/bootadd.css">
    <link rel="stylesheet" rev="stylesheet" type="text/css" media="all" href="https://cdn.p00q.cn/ys/css/css2.css">
    <th:block th:utext="${head}" />
</head>
<body>
<div style="background:#FFF" th:include="include/include :: dhl">
</div>
<div class="tvcontainer">
    <h3> 正在播放<span id="zzbf">CCTV1综合</span></h3>
    <div class="row">
        <div class="col-md-10" id="dplayer"></div>
        <div class="col-md-2" id="tvlist">
            <input type="image" class="tvlist-item" th:each="tv:${tvs}" th:src="${tv.tpurl}" th:pdid="${tv.dmid}"
                   th:pdname="${tv.name}" th:yuan="${tv.url}"/>
        </div>
    </div>
</div>
<style>
    .tvcontainer {
        width: 80%;
        margin: 0px auto;
    }

    #tvlist {
        overflow: auto;
    }

    .tvlist-item {
        width: 140px;
        height: 60px;
    }
</style>
<script>
    $(function () {
        if(window.location.protocol.split(':')[0]!="http"){
            window.location="http://dbys.vip/type/tv";
        }
        var pdname = null;
        var pd = null;
        if (pdname == null) {
            pd = $($(".tvlist-item")[0]);
        } else {
            $(".tvlist-item").each(function () {
                if ($(this).attr("pdname") == pdname) {
                    pd = $(this)
                }
            });
            if (pdname == null) {
                pd = $($(".tvlist-item")[0]);
            }
        }
        const dp = new DPlayer({
            autoplay: true,
            container: document.getElementById('dplayer'),
            logo: 'https://cdn.p00q.cn/ys/img/logo.png',
            theme: '#FFFFF0',
            live: true,
            danmaku: true,
            video: {
                pic: 'https://cdn.p00q.cn/ys/img/tip.png',
                url: pd.attr("yuan"),
                type: 'hls'
            },hlsjsConfig: {
                p2pConfig: {
                    live: true,
                }
            },
            contextmenu: [
                {
                    text: '淡白博客',
                    link: 'https://p00q.cn',
                }],
            apiBackend: {
                read: function (options) {
                    options.success();
                },
                send: function (options) {
                    Send(JSON.stringify({type: "send", data: options.data}));
                }
            }
        });
        dp.on("loadedmetadata", function () {
            dp.play();
        })
        const ws = new WebSocket("wss://dbys.vip/wss/tvdm");
        ws.onopen = function () {
            Send(JSON.stringify({type: "setdmid", data: pd.attr("pdid")}));
        };
        ws.onmessage = function (e) {
            dp.danmaku.draw(JSON.parse(e.data));
        };

        function Send(data) {
            ws.send(data);
        }

        $(window).resize(function () {
            var g = $("#dplayer").outerHeight(true)
            $("#tvlist").height(g)
        });
        var g = $("#dplayer").outerHeight(true)
        $("#tvlist").height(g)
        $(".tvlist-item").click(function () {
            pd = $(this);
            pdname = $(this).attr("pdname");
            $("#zzbf").text($(this).attr("pdname"))
            dp.switchVideo({url: pd.attr("yuan")});
            Send(JSON.stringify({type: "setdmid", data: pd.attr("pdid")}));
        })
    });
</script>
<footer class="footer" th:include="include/include :: foot"></footer>
</body>
</html>